<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>德施曼2019 - 新年抽奖</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/animate.css">
</head>

<body>
    <!-- 顶部中国风花纹 start -->
    <header class="top-head"></header>

    <!--左侧中奖名单展示-->
    <aside class="aside-left">
        <div class="aside-main" id="mingdan-con">
            <div class="btn btn-red-outline" data-toggle="modal" id="mingdan-title">中奖名单</div>
            <div class="award-main">
                <div id="award-123">
                    <div class="award-con" id="award-01">
                        <h3 class="award-title">一等奖</h3>
                        <ul class="win"></ul>
                    </div>
                    <div class="award-con" id="award-02">
                        <h3 class="award-title">二等奖</h3>
                        <ul class="win"></ul>
                    </div>
                    <div class="award-con" id="award-03">
                        <h3 class="award-title">三等奖</h3>
                        <ul class="win"></ul>
                    </div>
                </div>
                <div class="award-con" id="award-04">
                    <h3 class="award-title">纪念奖</h3>
                    <ul class="win"></ul>
                </div>
                <a href="javascript:;" id="award04-toggle" class="more">查看更多</a>
            </div>
        </div>
        <img src="./img/lantern.png" alt="" width="85" id="mingdan" class="switch">
    </aside>
    <!--右侧奖品名单展示-->
    <aside class="aside-right">
        <div class="aside-main" id="liwu-con">
            <div class="btn btn-red-outline" data-toggle="modal" id="liwu-title">新年礼物</div>
            <div class="award-main">
                <div class="award-con">
                    <h3 class="award-title">一等奖</h3>
                    <ul class="win">
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/canon.jpg" />
                            </div>
                            <div class="f-l name">佳能微单</div>
                        </li>
                    </ul>
                </div>
                <div class="award-con">
                    <h3 class="award-title">二等奖</h3>
                    <ul class="win">
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/kindle.jpg" />
                            </div>
                            <div class="f-l name">Kindle 阅读器</div>
                        </li>
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/kule.jpg" />
                            </div>
                            <div class="f-l name">酷乐视投影机</div>
                        </li>
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/beats.jpg" />
                            </div>
                            <div class="f-l name">Beats动力耳机</div>
                        </li>
                    </ul>
                </div>
                <div class="award-con">
                    <h3 class="award-title">三等奖</h3>
                    <ul class="win">
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/jingdong.jpg" />
                            </div>
                            <div class="f-l name">京东购物E卡</div>
                        </li>
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/yashua.jpg" />
                            </div>
                            <div class="f-l name">飞利浦电动牙刷</div>
                        </li>
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/anmo.jpg" />
                            </div>
                            <div class="f-l name">颈椎按摩器</div>
                        </li>
                    </ul>
                </div>
                <div class="award-con">
                    <h3 class="award-title">纪念奖</h3>
                    <ul class="win">
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/chongdian.jpg" />
                            </div>
                            <div class="f-l name">罗马仕充电宝</div>
                        </li>
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/nuanshou.jpg" />
                            </div>
                            <div class="f-l name">马卡龙 暖手宝</div>
                        </li>
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/bao.jpg" />
                            </div>
                            <div class="f-l name">旅行双肩包</div>
                        </li>
                        <li class="clearfix win-li">
                            <div class="f-l avatar">
                                <img width="34" src="./img/gift/beizi.jpg" />
                            </div>
                            <div class="f-l name">乐扣马克保温杯</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <img src="./img/lantern.png" alt="" width="85" id="liwu" class="switch">
    </aside>

    <!--倒计时展示-->
    <div class="stop-main">
        <div id="stop-time">叁</div>
        <div class="back"></div>
    </div>

    <button class="close" id="modal-close" data-dismiss="modal">
        <span aria-hidden="true">&times;</span>
    </button>

    <div class="modal fade" id="lottery-result" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <canvas id="lottery-canvas"></canvas>
            </div>
        </div>
    </div>

    <div class="main">
        <div class="lotterty-infogo">
            <img src="img/logo.png">
        </div>
        <div id="lottery-main" class="lottery-main">
            <div class="wrap-border-main">
                <img src="./img/wrap-border-1.png" class="wrap-border wrap-border-1">
                <img src="./img/wrap-border-2.png" class="wrap-border wrap-border-2">
                <img src="./img/wrap-border-3.png" class="wrap-border wrap-border-3">
                <img src="./img/wrap-border-4.png" class="wrap-border wrap-border-4">
                <div class="wrap-border wrap-border-left"></div>
                <div class="wrap-border wrap-border-right"></div>
            </div>
            <div class="wrap-main">
                <div class="lottery-wrap" id="lottery-wrap"></div>
            </div>

            <!--抽奖按钮-->
            <div class="dashboard">
                <div class="cirle-btn award" id="award-1" data-award="1">一</div>
                <div class="cirle-btn award" id="award-2" data-award="2">二</div>
                <div class="btn btn-red-outline lottery-btn" id="lottery-btn" data-award="">开始抽奖</div>
                <div class="cirle-btn award" id="award-3" data-award="3">三</div>
                <div class="cirle-btn award" id="award-4" data-award="4">纪</div>
            </div>
        </div>
    </div>

    <canvas class="snow-canvas" speed="2" interaction="true" size="10" count="30" start-color="rgba(253,252,251,1)"
        end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false" width="1366"
        height="667"></canvas>
    <canvas class="snow-canvas" speed="3" interaction="true" size="12" count="80" wind-power="-5" image="./img/snow.png"
        width="1366" height="667"></canvas>

    <footer class="footer"></footer>

    <!-- 新年祝福框模板 start -->
    <script type="text/template" id="lotterycon-tpl">
        <% _.each(lottery_datas, function (item) { %>
    <div class="clearfix lottery-list" data-id="" data-namezh="<%= item.namezh %>" data-nameen="<%= item.nameen %>">
        <div class="f-l turqoise lottery-avatar">
            <img src="./img/avatar/<%= item.nameen %>.jpg" alt="<%= item.namezh %>">
        </div>
        <div class="f-l lottery-content">
            <em class="beauty border-01"></em>
            <em class="beauty border-02"></em>
            <em class="beauty border-03"></em>
            <em class="beauty border-04"></em>
            <div class="border bor-top"></div>
            <div class="border bor-bottom"></div>
            <h3 class="content-title"> <span class="lottery-name"><%= item.namezh %></span> &nbsp;&nbsp;<span class="company">[ 德施曼 ]</span></h3>
            <div class="content-detail">
                <b>新年愿景及祝福：</b>
                <span><%= item.wish %></span>
            </div>
        </div>
    </div>
    <% }); %>
</script>
    <!-- 新年祝福框模板 end -->

    <!-- 中奖者数据展示模板 start -->
    <script type="text/template" id="awardcon-tpl">
        <li class="clearfix win-li">
        <div class="f-l avatar">
            <img width="34" src="./img/avatar/{nameen}.jpg"/>
        </div>
        <div class="f-l name">{namezh}</div>
        <a class="f-l delete" href="javascript:;">&times;</a>
    </li>
</script>
    <!-- 中奖者数据展示模板 end -->

    <!--音乐开关-->
    <a id="music-control" class="animated infinite bounce" href="javascript:;" data-open="1"></a>
    <!--清除数据开关-->
    <a id="clear-control" href="javascript:;" data-open="1"></a>

    <audio id="music" loop="loop" preload="auto" src="shiji.mp3">
        你的浏览器不支持audio标签
    </audio>

    <script type="text/javascript" src="./js/underscore.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./lottery_data.js"></script>
    <script src="js/boot-modal.js"></script>
    <script src="js/snow-plugin.js"></script>
    <!--<script type="text/javascript" src="js/Tween.js"></script>-->

    <script>
        //除chrome外，其他支持需要在服务器上运行才支持
        if (!window.localStorage) {
            alert('不支持localstorage，抽奖无法启动！');
        }

        // 处理 localstorage 中奖数据
        var local_handle = {
            local_item: "lottery_datas",
            get: function (key) {
                return window.localStorage.getItem(key) || ''
            },

            set: function (key, val) {
                window.localStorage.setItem(key, val);
            },
            delete: function (datas, name) {
                var res = [];
                datas.forEach(function (val, index) {
                    if (name != val.nameen) {
                        res.push(val);
                    }
                });
                var new_datas = JSON.stringify(res);
                this.set(this.local_item, new_datas);
                return res;
            },
            clear: function () {
                window.localStorage.clear()
            }
        };

        var award_log = null;
        if (!local_handle.get("award_log")) {
            var award_log = window.localStorage.getItem('award_initial');
            award_log = JSON.parse(award_log);
        } else {
            var award_log = window.localStorage.getItem('award_log');
            award_log = JSON.parse(award_log);
        }


        // ---------------- 加载、渲染 滚动抽奖信息数据 ------------
        // 如果得不到数据，则从初始化数据中获取
        if (!local_handle.get("lottery_datas")) {
            var lottery_storage = window.localStorage.getItem('lottery_initial');
        } else {
            var lottery_storage = window.localStorage.getItem('lottery_datas');
        }
        var lottery_datas = JSON.parse(lottery_storage);
        $('#lottery-wrap').html(_.template($('#lotterycon-tpl').html(), lottery_datas));

        // ---------------- 加载、渲染 滚动抽奖信息数据 ------------
        if (local_handle.get("award_1")) {
            $('#award-01').show();
            var award1_storage = window.localStorage.getItem('award_1');
            var award1_datas = JSON.parse(award1_storage);
            award1_datas.forEach(function (val, key) {
                var award_tpl = $('#awardcon-tpl').html();
                var award_dom = substitute(award_tpl, val);
                $('#award-01 .win').append(award_dom)
            });
        }
        if (local_handle.get("award_2")) {
            $('#award-02').show();
            var award2_storage = window.localStorage.getItem('award_2');
            var award2_datas = JSON.parse(award2_storage);
            award2_datas.forEach(function (val, key) {
                var award_tpl = $('#awardcon-tpl').html();
                var award_dom = substitute(award_tpl, val);
                $('#award-02 .win').append(award_dom)
            });
        }
        if (local_handle.get("award_3")) {
            $('#award-03').show();
            var award3_storage = window.localStorage.getItem('award_3');
            var award3_datas = JSON.parse(award3_storage);
            award3_datas.forEach(function (val, key) {
                var award_tpl = $('#awardcon-tpl').html();
                var award_dom = substitute(award_tpl, val);
                $('#award-03 .win').append(award_dom)
            });
        }
        if (local_handle.get("award_4")) {
            $('#award04-toggle').css('display', 'inline-block');
            var award4_storage = window.localStorage.getItem('award_4');
            var award4_datas = JSON.parse(award4_storage);
            award4_datas.forEach(function (val, key) {
                var award_tpl = $('#awardcon-tpl').html();
                var award_dom = substitute(award_tpl, val);
                $('#award-04 .win').append(award_dom)
            });
        }


        // ---------------- 抽奖动画相关参数配置 ------------
        var nextFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
                var currTime = +new Date,
                    delay = Math.max(1000 / 60, 1000 / 60 - (currTime - lastTime));
                lastTime = currTime + delay;
                return setTimeout(callback, delay);
            },
            cancelFrame = window.cancelAnimationFrame ||
            window.webkitCancelAnimationFrame ||
            window.webkitCancelRequestAnimationFrame ||
            window.mozCancelRequestAnimationFrame ||
            window.msCancelRequestAnimationFrame ||
            clearTimeout,
            // 初始滚动速度
            speed = 6,
            // 每个对话框外部高度(包括padding与margin)
            // 注：为了方便，这里统一设置为 132+28 = 160
            item_outer_height = $('.lottery-list:eq(1)').outerHeight(true),
            item_height = $('.lottery-list:eq(1)').outerHeight(),
            // 单个抽奖框框的中间位置
            left_center_top = item_height / 2 - 20,
            // 抽奖按钮
            lottery_btn = $('#lottery-btn'),
            // 是否移动
            isMove = true,
            // 抽奖是否开始
            isStart = false,
            // 设置抽奖锁
            isLock = true,
            // 是否可以关闭重开
            can_stop = false,
            // 初始移动是的定时动画变量
            timer = null,
            // 全局 setTimeout 定时任务指定变量
            setout_time = null;

        // 嗯，just go ！
        function justGo(isMove) {
            var moveDom = document.getElementById('lottery-wrap'),
                wrapDom = document.getElementById('lottery-main'),
                move_height = moveDom.offsetHeight,
                wrap_height = wrapDom.offsetHeight,
                moveTop = moveDom.offsetTop;
            var all_size = $('#lottery-wrap .lottery-list').size();
            // 随机生成停止位置的索引
            var start_index = Math.floor(Math.random() * (all_size - 4));
            var start_top = -item_outer_height * start_index;
            var moveY = start_top;

            $('#lottery-wrap').html($('#lottery-wrap').html() + $('#lottery-wrap').html());

            var justMove = function (flag) {
                timer = nextFrame(function () {
                    moveY -= speed;
                    moveDom.style.top = moveY + 'px';
                    if (-(moveY) >= move_height) {
                        moveY = 0;
                    }
                    justMove(flag);
                });
            };

            if (isMove) {
                justMove(isMove);
            } else {
                return false;
            }
        }

        // 开始抽奖
        function startLottery() {
            isStart = true;
            isMove = false;
            // 在进入本轮抽奖逻辑后，开启本轮抽奖锁
            isLock = true;
            // 设置抽奖按钮状态
            lottery_btn.text('正在滚动 ^_^');
            lottery_btn.css('background', '#FFBFB7');

            setout_time = setTimeout(function () {
                speed = 15;
            }, 1000);

            setout_time = setTimeout(function () {
                speed = 20;
            }, 3000);

            setout_time = setTimeout(function () {
                speed = 30;
            }, 5000);
            setout_time = setTimeout(function () {
                speed = 50;
            }, 7000);
            setout_time = setTimeout(function () {
                speed = 90;
                $('#lottery-btn').text('可抽奖啦 @_@');
                // 当速度达到最终的设置峰值是，isLock 将会解锁，此时，才可以停止动画
                isLock = false;
                clearTimeout(setout_time);
            }, 9000);
        }

        // 结束抽奖
        function stopLottery() {
            var moveDom = document.getElementById('lottery-wrap');

            // 当isLock 锁还没解锁时， 此时不能停止抽奖，将会抛出没结束的异常
            if (isLock) {
                console.log('还没结束，请稍等...');
                return;
            }
            isStart = false;
            isMove = false;
            speed = 8;

            /*-------- 手动停止的方案 --------*/
            // 得到当前所在高度值
            //        var stop_top = $('#lottery-wrap').css('top');
            //        // 将当前高度值转换为绝对正值
            //        stop_top = Math.abs(parseInt(stop_top));
            //        // 对当前高度值取余
            //        var left_height = item_outer_height - stop_top % item_outer_height;
            //        // 剩下的尺寸
            //        var left_distance = left_height + left_center_top;
            //        // 最终停下来的所在高度
            //        var end_top = stop_top + left_distance;
            //        // 最终定位到第几个对话框的索引
            //        var sure_index = Math.floor((end_top + item_height % 2) / item_height) + 1;

            /*-------- 随机数欺骗停止方案 --------*/
            // 获取当前总的抽奖框
            var lottery_size = $('#lottery-wrap .lottery-list').size();
            console.log(lottery_size)
            // 随机生成停止位置的索引
            var stop_index = Math.floor(Math.random() * (lottery_size - 4));

            // 将整个抽奖块移动到停止索引所在位置 top 值
            var stop_top = item_outer_height * stop_index;
            //        $('#lottery-wrap').css('top', -stop_top);

            // 停止动画时要走的距离，即再走三个索引（即两个框+半个框的距离）
            var left_distance = Math.floor(item_outer_height * 2 + (item_outer_height - item_height));
            var sure_index = stop_index + 4;

            // 移动到要到达的指定位置
            var lastStep = function () {
                time02 = nextFrame(function () {
                    top -= 8;
                    moveDom.style.top = (-stop_top + top) + 'px';
                    if (-top <= left_distance) {
                        lastStep();
                    } else {
                        cancelFrame(time02);
                        // 处理中奖后的相关样式效果
                        $('#lottery-wrap .lottery-list').eq(sure_index).addClass('sure-active');
                        var award_tpl = $('#awardcon-tpl').html();
                        var award_dom = substitute(award_tpl, award_tmp);
                        $('#award-0' + award).show();
                        if (award == 4) {
                            $('#award-123').hide();
                            $('#award-04').show();
                            $('#award04-toggle').css('display', 'inline-block');
                        }
                        $('#award-0' + award + ' .win').append(award_dom);
                    }
                });
            };
            lastStep();
            // 停止动画
            cancelFrame(timer);

            var award = $('#lottery-btn').data('award');
            var lottery_name_zh = $('#lottery-wrap .lottery-list').eq(sure_index).data('namezh');
            var lottery_name_en = $('#lottery-wrap .lottery-list').eq(sure_index).data('nameen');

            // 移动完剩下的尺度
            var top = 0;
            var time02 = null;
            // 最后的倒计时
            $('.stop-main').fadeIn();
            //        $('#stop-time').fadeIn();
            var stop_time = setTimeout(function () {
                $('#stop-time').fadeIn();
                $('#stop-time').text('贰');
                $('#stop-time').fadeOut();
            }, 1000);
            stop_time = setTimeout(function () {
                $('#stop-time').fadeIn();
                $('#stop-time').text('壹');
            }, 2000);
            stop_time = setTimeout(function () {
                $('#stop-time').fadeOut();
                clearTimeout(stop_time);
                $('.stop-main').hide();
            }, 2500);

            // 向 localstorage 中写入中奖人数据
            var local_award = local_handle.get('award_' + award);
            var award_tmp = null;
            if (local_award) {
                var award_datas = JSON.parse(local_award);
                award_tmp = {
                    'nameen': lottery_name_en,
                    'namezh': lottery_name_zh
                };
                award_datas.push(award_tmp);
                local_handle.set("award_" + award, JSON.stringify(award_datas));
            } else {
                var award_datas = [];
                award_tmp = {
                    'nameen': lottery_name_en,
                    'namezh': lottery_name_zh
                };
                award_datas.push(award_tmp);
                local_handle.set("award_" + award, JSON.stringify(award_datas));
            }
            // 写入上次抽中的奖项记录
            local_handle.set("award_history", award);

            // 删除已经中奖的人数据
            local_handle.delete(lottery_datas, lottery_name_en);
            // 该项奖项将减1
            award_log['award0' + award] -= 1;
            local_handle.set('award_log', JSON.stringify(award_log));

            // 绘制最后出现的中奖canvas图
            drawAward(award, lottery_name_zh, lottery_name_en);

            // 为防止最后出现空白
            $('#lottery-wrap').html($('#lottery-wrap').html() + $('#lottery-wrap').html());

            setTimeout(function () {
                // $(".snow-canvas").snow();
                $('#lottery-result').modal('show');
                drawAward(award, lottery_name_zh, lottery_name_en);

                can_stop = true;
                clearTimeout(arguments.callee);

                // 清除当前的定时任务
                //            isStart = false;
                //            isMove = true;
                //            lottery_btn.text('开始抽奖');
                //            lottery_btn.css('background', 'none');
            }, 4200);

        }

        // canvas 绘制中奖结果
        function drawAward(award, name_zh, name_en, pic_format) {
            var canvas = document.getElementById('lottery-canvas');
            var context = canvas.getContext('2d');
            if (!pic_format) {
                pic_format = 'png';
            }
            canvas.width = 700;
            canvas.height = 1300;
            var back_img = new Image();
            var avatar = new Image();
            avatar.src = './img/avatar/' + name_en + '.jpg';
            back_img.src = './img/award_' + award + '.' + pic_format;
            back_img.onload = function () {
                context.drawImage(back_img, 0, 0);

                // 绘制圆形头像
                circleImg(context, avatar, 158, 178, 200);

                context.fillStyle = '#D9AD61';
                context.font = "bold 6rem STKaiti";
                if (name_zh.length <= 2) {
                    context.fillText(name_zh, 300, 1010);
                } else if (name_zh.length >= 3) {
                    context.fillText(name_zh, 280, 1000);
                }
            };
        }

        function circleImg(ctx, img, x, y, r) {
            ctx.save();
            var d = 2 * r;
            var cx = x + r;
            var cy = y + r;
            ctx.arc(cx, cy, r, 0, 2 * Math.PI);
            ctx.clip();
            ctx.drawImage(img, x, y, d, d);
            ctx.restore();
        }

        // 简单的模板替换引擎
        function substitute(str, o, regexp) {
            return str.replace(regexp || /\\?\{([^{}]+)\}/g, function (match, name) {
                return (o[name] === undefined) ? '' : o[name];
            });
        }

        $(function () {

            justGo(isMove);

            // 关闭中奖后弹出的 modal
            $('#modal-close').click(function () {
                if (!can_stop) {
                    console.error('还没结束，无法重开！');
                    return false;
                }
                $('#lottery-result').modal('hide');
            });

            // 音乐开关
            var music_local = (local_handle.get('music') == '') ? '1' : local_handle.get('music');
            var music_config = {
                music: document.getElementById('music'),
                music_bool: (music_local == '1'),
                init: function () {
                    if (this.music_bool) {
                        this.play();
                    } else {
                        this.music.pause();
                    }
                },
                play: function () {
                    // this.music.play();
                    $('#music-control').addClass('animated infinite bounce');
                    local_handle.set('music', 1);
                    this.music_bool = true
                },
                pause: function () {
                    this.music.pause();
                    $('#music-control').removeClass('animated infinite bounce');
                    local_handle.set('music', 0);
                    this.music_bool = false;
                }
            };
            music_config.init();
            $('#music-control').click(function () {
                if (music_config.music_bool) {
                    music_config.pause()
                } else {
                    music_config.play();
                }
            });

            // 清除数据开关
            $('#clear-control').click(function () {
                var sure = confirm('警告：确定清除所有数据？！');
                if (sure) {
                    local_handle.clear();
                    window.location.reload();
                }
            });

            // 控制：显示/隐藏 抽奖名单和抽奖奖品显示
            if (local_handle.get("mingdan_toggle") == 1) {
                $('#mingdan-con').slideDown();
                $('#mingdan').hide();
            } else {
                $('#mingdan-con').hide();
                $('#mingdan').show();
            }
            if (local_handle.get("liwu_toggle") == 1) {
                $('#liwu-con').slideDown();
                $('#liwu').hide();
            } else {
                $('#liwu-con').hide();
                $('#liwu').show();
            }

            $('#mingdan').click(function () {
                $(this).fadeIn();
                $('#mingdan-con').slideDown(1000);
                local_handle.set("mingdan_toggle", 1);
            });
            $('#mingdan-title').click(function () {
                $('#mingdan-con').slideUp(1000);
                $('#mingdan').show();
                local_handle.set("mingdan_toggle", 0);
            });
            $('#liwu').click(function () {
                $(this).fadeOut();
                $('#liwu-con').slideDown(1000);
                local_handle.set("liwu_toggle", 1);
            });
            $('#liwu-title').click(function () {
                $('#liwu-con').slideUp(1000);
                $('#liwu').show();
                local_handle.set("liwu_toggle", 0);
            });

            // 控制：显示/隐藏纪念奖
            var award_history = local_handle.get('award_history');
            if (award_history == 4) {
                $('#award-04').show();
                $('#award-123').hide();
            }
            $('#award04-toggle').click(function () {
                if ($('#award-04').is(":hidden")) {
                    $('#award-04').show();
                } else {
                    $('#award-04').hide();
                }

                if ($('#award-123').is(":hidden")) {
                    $('#award-123').show();
                } else {
                    $('#award-123').hide();
                }
            });

            // 控制奖项的选择
            // 1: 一等奖
            // 2: 二等奖
            // 3: 三等奖
            // 4: 纪念奖
            var select_award = local_handle.get('select_award');
            console.log(select_award)
            if (select_award) {
                $('.award').eq(select_award - 1).addClass('award-active');
                $('#lottery-btn').data('award', select_award);
            } else {
                $('.award').eq(3).addClass('award-active');
                $('#lottery-btn').data('award', 4);
            }
            $('.award').click(function () {
                if (isStart) {
                    console.error('正在抽奖ing，不允许更改奖项设置哦 ^_^');
                    return false;
                }
                local_handle.set('select_award', $(this).data('award'));
                $('#lottery-btn').data('award', $(this).data('award'));
                $(this).addClass(function () {
                    return $(this).hasClass('award-active') ? false : 'award-active';
                }).siblings('.award').removeClass('award-active')
            });

            // 开始抽奖按钮
            lottery_btn.click(function () {
                var cur_lottery = $('#lottery-btn').data('award');
                console.log(cur_lottery)
                if (!cur_lottery) {
                    alert('请先设置好奖项再抽奖哦 ^_^');
                    return;
                }

                if (award_log['award0' + cur_lottery] <= 0) {
                    alert('该奖项已经抽完啦，请选择其它奖项哦 ^_^！');
                    return;
                }
                if(cur_lottery==4){
                    console.log("纪念奖")
                }
                // 当本轮抽奖结束后，抽奖将会进入短暂休眠期，此时将不会响应抽奖行为
                if (!isStart && !isMove) {
                    console.log('本轮已结束');
                    window.location.reload();
                    return false;
                }

                if (!isStart && isMove) {
                    startLottery();
                } else if (isStart) {
                    stopLottery();
                }
            });

            // 执行空格键操作，等价于执行 “抽奖按钮点击” 操作
            $(document).keypress(function (e) {
                if (e.keyCode == 32) {
                    lottery_btn.click();
                }
                // 一、二、三、纪念奖
                if (e.keyCode == 49) {
                    $('#award-1').click();
                }
                if (e.keyCode == 50) {
                    $('#award-2').click();
                }
                if (e.keyCode == 51) {
                    $('#award-3').click();
                }
                if (e.keyCode == 52) {
                    $('#award-4').click();
                }
                // Enter 按键
                if (e.keyCode == 13) {
                    $('#modal-close').click();
                }
                // delete按键
                if (e.keyCode == 46) {
                    $('#clear-control').click();
                }
            });

        });
    </script>
</body>

</html>